<template>
  <div class="homepage">
    <!-- Navigation bar -->
    <div class="homepage-header-bav" style="position: fixed; top: 0; left: 0; right: 0">
      <div class="header-bav">
        <div class="homepage-header-bav-left">
          <div class="items-center">
            <!-- User avatar -->
            <el-avatar
              class="mr-3"
              :size="34"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <span class="text-sm mr-2" style="color: var(--el-text-color-regular)"> 个人主页</span>
            <el-icon><Message /></el-icon>
          </div>
        </div>
        <div class="homepage-header-bav-right">
          <div class="bav-button">
            <RouterLink to="/Inbox"><el-button>收件箱</el-button></RouterLink>
            <RouterLink to="/LookTask"><el-button type="primary">查看任务</el-button></RouterLink>
            <RouterLink to="/Request"
              ><el-button type="success" class="ml-2">任务生成</el-button></RouterLink
            >
          </div>
        </div>
      </div>
    </div>
    <!-- Main content area -->
    <div class="homepage-content" style="margin-top: 60px">
      <!-- Router view for displaying components based on the current route -->
      <RouterView />
    </div>
  </div>
</template>

<style>
.homepage {
  width: 100%;

  /* height: 50px; */
}
.homepage-header-bav {
  width: 100%;
  /* height: 50px;   这个地方一会儿要改一下*/
  background-color: #a39d9d;
  height: 50px;
}
.header-bav {
  position: relative;
  margin: 0 auto; /*居中对齐的一种方式*/
  width: 1226px;
  height: 100%;
}
.homepage-header-bav-left {
  position: absolute;
  left: 0;
  margin-left: 0;
  width: 750px;
  height: 100%;
}
.homepage-header-bav-right {
  position: absolute;
  width: 400px;
  height: 100%;
  right: 0;
}
.items-center {
  position: absolute;
  width: 100%;
  height: 100%;
  /* display: flex; */
  padding-left: 0;
}
.bav-button {
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
}
.homepage-content {
  position: relative;
  margin: 0 auto;
  width: 1226px;
  height: 100%;
}
</style>
